package cn.net.autocode.platform.file.viewTemplate;

public class WordView {

    public static final String template = """
            <!DOCTYPE html>
            <html lang="en" xmlns:th="http://www.thymeleaf.org">
            <head>
                <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
                <meta content="IE=edge" http-equiv="X-UA-Compatible">
                <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
                <meta content="webkit" name="renderer">
                <title>{fileName}</title>
                <script src="/links/office/mammoth.browser.min.js"></script>
                <script src="/links/jquery/jquery-3.5.1.min.js"></script>
                <script src="/links/polyfill.min.js"></script>
                <script src="/links/layer/layer.js"></script>
                <script src="/links/axios/axios.min.js"></script>
                <script src="/links/vue/vue.min.js"></script>
                <script src="/links/element-ui/index.js"></script>
                <script src="/js/HttpApi.js"></script>
                <style>
                    * {
                        box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                    }
            
                    .container {
                        margin-left: auto;
                        margin-right: auto;
                        max-width: 72rem;
                    }
            
                    .preview-shadow {
                        box-shadow: 0 40px 20px rgba(0, 0, 0, 0.08);
                        margin-bottom: 2rem;
                        padding: 2rem 1rem;
                        --tw-bg-opacity: 1;
                        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
                    }
            
                    .max-w-none {
                        max-width: none;
                    }
            
                    img {
                        overflow-clip-margin: content-box;
                        overflow: clip;
                    }
            
                    img, video {
                        max-width: 100%;
                        height: auto;
                    } 
                </style>
            
                <script>
                    async function loadAndPreviewWordFile() {
                        const wordPreview = document.getElementById('wordPreview');
                        const documentTitle = document.getElementById('documentTitle');
                        let url = "{contentUrl}";
                        const response = await fetch(url, {
                            method: 'GET',
                            headers: {
                                'Accept': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/msword'
                            }
                        });
            
                        if (!response.ok) {
                            throw new Error(`服务器响应错误: ${response.status} ${response.statusText}`);
                        }
            
                        // 2. 将响应转换为ArrayBuffer
                        const arrayBuffer = await response.arrayBuffer();
            
                        // 3. 使用mammoth转换为HTML
                        const result = await mammoth.convertToHtml({arrayBuffer: arrayBuffer});
            
                        // 4. 提取文件名
                        const disposition = response.headers.get('Content-Disposition');
                        const match = disposition.match(/fileName[^;=\\n]*=((['"]).*?\\2|[^;\\n]*)/);
            
                        if (match && match[1]) {
                            // 3. 处理可能的引号和编码
                            let fileName = match[1].replace(/['"]/g, ''); // 去除引号
                            fileName = decodeURIComponent(fileName);
                            documentTitle.textContent = fileName;
                        }
            
                        // 5. 更新预览区域
                        wordPreview.innerHTML = result.value;
                    }
                </script>
            </head>
            <body onload="loadAndPreviewWordFile()">
            <div class="container">
                <div class="preview-shadow" id="previewContainer">
                    <div>
                        <h2 id="documentTitle">文档预览</h2>
                        <button style="color:blue;" onclick="HttpApi.downLoadFile('{fileId}')">下载源文件</button>
                    </div>
                    <div class="max-w-none" id="wordPreview"></div>
                </div>
            </div>
            </body>
            </html>
            """;
}
